<template>
  <div class="container">
    <div class="main-wk">
      <div class="header">
          <div class="back-title">
          <i class="el-icon-arrow-left" @click="goBack">返回</i>
        </div>
        <div class="data-title">
          <h3>基础信息</h3>
        </div>
        <div class="data-cont hk-flex">
          <div class="data-cont-img">
            <img src="@/assets/images/zdhx.png" alt="" />
            <p>{{ baseInfo.title }}</p>
          </div>
          <div class="data-cont-list">
            <el-row>
              <el-col v-for="(item, index) in baseInfo.value" class="el-col-content hk-flex" :span="4">
                <template>
                  <span class="content-list content-list-tit">{{ item.label }}:</span>
                  <template v-if="item.label == '在线状态'">
                    <span class="content-list content-list-txt" style="color: #32cb72">{{ item.content }}</span>
                  </template>
                  <template v-else>
                    <span class="content-list content-list-txt" :title="item.content">{{ item.content }}</span>
                  </template>
                </template>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="content-wk">
        <div :class="['tab-wk',{ show: isShow }]">
          <div class="back-title" v-if="isShow">
          <i class="el-icon-arrow-left" @click="goBack">返回</i>
        </div>
        <div class="tab hk-flex">
          <div v-for="(i, index) in tabs" :key="index" class="tablist">
            <span :class="currentIndex == index ? 'active' : ''" @click="(e)=>changeTab(index,e)">
              {{ i.title }}
            </span>
          </div>
        </div>
        </div>
        
        <div class="content" @scroll="onScroll">
          <div :id="'content-item0'" class="content-item scroll-item">
            <!-- 登录情况 -->
            <BehaviorDetail :ip="ip" />
            <!-- 运行安全 -->
            <!-- <ConfigurationDetail /> -->
          </div>
          <div :id="'content-item1'" class="content-item scroll-item">
            <!-- 网络访问信息 -->
            <InternetAccess :ip="ip" />
          </div>
          <div :id="'content-item2'" class="content-item scroll-item">
            <!-- 文件操作行为 -->
            <file-behavior :ip="ip" />
          </div>
          <div class="content-item scroll-item">
            <!-- 打印刻录情况 -->
            <PrintBurn :ip="ip" />
          </div>
          <div :id="'content-item3'" class="content-item scroll-item">
            <!-- 打印刻录情况 -->
            <!-- <PrintBurn :ip="ip" /> -->
             <!-- 操作行为审计 -->
            <BehaviorAudit />
          </div>
          <div :id="'content-item4'" class="content-item scroll-item">
           <!-- 安全保密基线 -->
            <SafeBaseline :ip="ip" />
          </div>
          <div :id="'content-item5'" class="content-item scroll-item">
            <!-- 违规及异常告警 -->
            <EventOverview :ip="ip" />
            <EventTrend />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryById } from '@/api/dispose/userPortrait'
import EventOverview from '../components/EventOverview'
import EventTrend from '../components/EventTrend'
import ConfigurationDetail from '../components/ConfigurationDetail'
import BehaviorDetail from '../components/BehaviorDetail'
import InternetAccess from '../components/InternetAccess'
import FileBehavior from '../components/FileBehavior'
import BehaviorAudit from '../components/BehaviorAudit'
import PrintBurn from '../components/PrintBurn'
import SafeBaseline from '../components/SafeBaseline'
import { mapMutations } from 'vuex'
export default {
  components: {
    ConfigurationDetail,
    FileBehavior,
    EventOverview,
    EventTrend,
    BehaviorAudit,
    BehaviorDetail,
    InternetAccess,
    PrintBurn,
    SafeBaseline,
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == '/dispose/search') {
      to.meta.keepAlive = true
    }
    next()
  },
  data() {
    return {
      isShow: false,
      assetsArr: [],
      baseInfo: {
        title: '',
        value: [],
      },
      assetsObj: {},
      tabs: [
        { title: '本地操作行为' },
        { title: '网络访问信息' },
        { title: '文件操作行为' },
        { title: '操作行为审计' },
        { title: '安全保密基线' },
        { title: '违规及异常告警' },
      ],
      currentIndex: 0,
      ip: null,
      heightArr: [],
    }
  },
  computed: {
    // ...mapState({
    //   assetsObj: (state) => state.portrait.assetsObj,
    // }),
  },
  mounted() {
    setTimeout(() => {
      for (let i = 0; i < 6; i++) {
      this.heightArr.push(document.querySelector('#content-item' + i).getBoundingClientRect().top-100)
    }
    }, 1000);
    $('.main-wk').scroll(() => {
      const scrollTop = $('.main-wk').scrollTop() || document.body.scrollTop
      if (scrollTop > 250) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      for (let h = this.heightArr.length-1; h >= 0; h--) {
        if (this.heightArr[h] > scrollTop) continue
        else {
          this.currentIndex = h
          break
        }
      }
    })
  },
  methods: {
    ...mapMutations(['portrait/changeShowtab1', 'portrait/changeAssetsObj']),

    goBack() {
      this.$router.push({
        path: window.prefix + '/dispose/search', // 注意使用 params 时一定不能使用 path
        query: { showTab1: false },
      })

      // this["portrait/changeShowtab1"](true);
    },
    changeTab(index,e) {
      $('.main-wk').scrollTop(this.heightArr[index]+100)
      // this.$el.querySelector('#content-item' + index).scrollIntoView({ block: 'start', behavior: 'smooth' })+100
    },
    // 滚动条滚动
    onScroll(index,e) {
      const scrollItems = document.querySelectorAll('.scroll-item')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        const judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 500
        if (judge) {
          this.currentIndex = i.toString()
          break
        }
      }
    },
    // 获取基础信息部分
    getBaseInfo(res) {
      this.assetsObj = res || this.$store.state.portrait.assetsObj

      const assetsObj = this.assetsObj
      if (!assetsObj) return
      this.ip = assetsObj.equipmentIp
      this.baseInfo.title = assetsObj.name
      this.baseInfo.value = [
        { label: 'IP地址', content: assetsObj.equipmentIp },
        { label: 'MAC', content: assetsObj.equipmentMac },
        {
          label: '设备类型',
          content: assetsObj.equipmentTypeDictLable,
        },
        {
          label: '是否国产化',
          content: assetsObj.equipmentLocalizedDictLable,
        },
        {
          label: '设备类别',
          content: assetsObj.equipmentCategoryDictLable,
        },
        { label: '责任人', content: assetsObj.equipmentUserName },
        { label: '责任部门', content: assetsObj.equipmentOrgIdDictLable },
        { label: '部署网络', content: assetsObj.equipmentNetTypeDictLable },
        { label: '设备状态', content: assetsObj.equipmentStatusDictLable },
        {
          label: '设备密级',
          content: assetsObj.equipmentSecLevelDictLable,
        },
        { label: '存放位置', content: assetsObj.equipmentDeposit },
        {
          label: '重要程度',
          content:
            assetsObj.equipmentCriticalityLevel == 1
              ? '一般'
              : assetsObj.equipmentCriticalityLevel == 2
              ? '重要'
              : assetsObj.equipmentCriticalityLevel == 3
              ? '特別重要'
              : '',
        },
        { label: '用途说明', content: assetsObj.equipmentPurposeDictLable },
        { label: '所在安全域', content: assetsObj.equipmentDomainName },
        // { label: "在线状态", content: assetsObj.equipmentUseStatusDictLable },
      ]
    },
    getAssetsObj() {
      return new Promise((resolve, reject) => {
        if (!this.$route.params.id && !this.$route.query.id) {
          resolve()
          return
        } else {
          const id = this.$route.params.id || this.$route.query.id
          queryById(id).then((res) => {
            this['portrait/changeAssetsObj'](res.list[0])
            resolve(res.list[0])
          })
        }
      })
    },
  },
  // eslint-disable-next-line vue/order-in-components
  watch: {
    // assetsObj: {
    //   handler(newValue, oldValue) {
    //     if (!newValue) {
    //       this.$router.push("/dispose/search");
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  // eslint-disable-next-line vue/order-in-components
  created() {
    this.getAssetsObj().then((res) => {
      this.getBaseInfo(res)
    })
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  overflow: hidden !important;
}
#app.dark-theme {
  .event-item-title,
  .event-item-rt {
    color: #fff !important;
  }
  .header {
    background: rgba(59, 139, 255, 0.1) !important;
  }
  .tab,
  .show,
  .container {
    background: #14285c !important;
  }
}
.back-title {
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 10px;
  cursor: pointer;
  // padding: 0 15px;
}
.data-title {
  margin-bottom: 10px;
  padding-left: 20px;
  h3 {
    font-size: 18px;
    line-height: 40px;
    font-weight: bold;
    margin: 0;
  }
}
.container {
  height: 100%;
  background: #eef0f5;
  font-size: 14px;
  .main-wk {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }
  .header {
    padding: 0px 0px 20px;
    background: #fff;
    border-radius: 4px;
    .back {
      line-height: 40px;
      height: 40px;
      cursor: pointer;
      // margin-bottom: 10px;
    }
    .data-cont {
      flex-wrap: nowrap;
      align-items: center;
      .data-cont-img {
        width: 20%;
        text-align: center;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .data-cont-list {
        .el-col-content {
          margin-right: 15px;
          line-height: 30px;
          flex-wrap: nowrap;
          color: #8c8c8c;
          .content-list {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.content-list-tit {
              width: 40%;
              text-align: right;
            }
            &.content-list-txt {
              width: 60%;
              padding-left: 15px;
            }
          }
        }
      }
    }
  }
  .content-wk {
    // height: calc(100% - 240px);
    // position: relative;
    padding: 0;
    .show {
      position: fixed;
      background: #fff !important;
      top: 70px;
      // left: 0;
      width: 86.6%;
      z-index: 999;
      /* 这里是要固定显示的样式 */
    }
    .tab {
      background: #eef0f5;
      padding: 10px;
      .tablist {
        display: inline-block;
        color: #656565;
        span {
          display: inline-block;
          padding: 10px 0;
          margin-right: 20px;
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
      }
      .active {
        border-bottom: 2px solid #4b6eef !important;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 70px);
      // overflow: auto;
      .content-item {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
